﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>用户注册统计</title>
    <script src="../../scripts/boot.js" type="text/javascript"></script>

</head>
<body>
<div class="mini-splitter" style="width:100%;height:100%;">
    <div size="20%" showCollapseButton="false">
        <div id="datagrid1" class="mini-datagrid" showHeader="true" title="注册统计" style="width:100%;height:100%;"
             ajaxType="get" idField="id" onload="onLoadError"
             dataField="data" showPager="false" showSummaryRow="true" ondrawsummarycell="onDrawSummaryCell"
             selectOnLoad="true" onselectionchanged="onSelectionChanged">
            <div property="columns">
                <div field="date" width="60" headerAlign="center" align="center" dateFormat="yyyy-MM-dd">注册日期
                </div>
                <div field="num" width="50" headerAlign="center" align="center" summaryType="sum">注册人数</div>
            </div>
        </div>
    </div>
    <div showCollapseButton="false">
        <div id="datagrid2" class="mini-datagrid" showHeader="true" title="注册用户" style="width:100%;height:100%;"
             ajaxType="get" idField="id" onload="onLoadError"
             dataField="data" showPager="false">
            <div property="columns">
                <div field="id" width="20" headerAlign="center" align="center">ID</div>
                <div field="avatar" width="60" headerAlign="center" renderer="onAvatarRenderer" align="center">
                    头像
                </div>
                <div field="nickname" width="80" headerAlign="center" align="center">昵称</div>
                <div field="phone" width="60" headerAlign="center" align="center">帐号</div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    mini.parse();

    let header = {Authorization: $.cookie(TOKEN_KEY)};

    // 表格
    let grid1 = mini.get("datagrid1");
    grid1.setUrl(`${MSG_API_PREFIX}/user/registerCount`);
    grid1.setAjaxOptions({
        headers: header
    });
    grid1.load();


    function onDrawSummaryCell(e) {
        if (e.field === "num") {
            e.cellHtml = "注册总数: " + e.value + "人";
        }
    }


    function onSelectionChanged() {
        let row = grid1.getSelected();
        if (row) {
            let grid2 = mini.get("datagrid2");
            grid2.setTitle(`注册用户(${row.date})`);
            grid2.setUrl(`${MSG_API_PREFIX}/user/listbydate?date=${row.date}`);
            grid2.setAjaxOptions({
                headers: header
            });
            grid2.load();
        }
    }

</script>
</body>
</html>
